<template>
  <div class="collect-page">
    <van-nav-bar fixed title="我的喜欢" />
    <!-- 上拉加载更多 -->
    <!--
    把首页的  <vant-cell>内容封装到一个单独的组件中
    注意这里文件夹别放错了
    页面级组件：放入views文件夹
    盒子级组件：放入components文件夹

    注册成全局组件使用
    - 全局组件在main.js中注册

    `Article.vue`页面中
    全局组件一旦注册，任何地方直接使用
  -->
  <!-- 面经item组件 -->
  <!-- 使用v-for渲染数据 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="我也是有底线的!~~~~"
      @load="onLoad"
    >
    <!-- 面经item组件 -->
    <ArticleItem v-for="item in list" :key="item.id" :item="item"
    ></ArticleItem>
    </van-list>
    <!--
    v-model:是否处于加载状态，加载过程中不触发load事件
    finished:是否已加载完成，加载完成后不再触发load事件
    finished-text:加载完成后的提示文案
    load事件:滚动条与底部距离小于 offset 时触发
   -->
  <!-- 分页组件list:https://vant-contrib.gitee.io/vant/v2/#/zh-CN/list -->
  <!-- 基础用法
  List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。
   -->
  <!-- 组件中渲染ajax数据固定套路
   1. 给data添加数据
   2. 发送ajax请求
   3. 把服务器响应的数据绑定到data
   4. 使用插值或指令渲染数据
   对象就用插值
   数组就用v-for
   有子组件的就用props把数据传给子组件渲染 -->
  </div>
</template>

<script>
// 导入获取喜欢接口
import { getLikeList } from '@/api/article.js'

export default {
  name: 'like-page',
  data () {
    return {
      // 当前页码
      page: 1,
      // 加载更多动画
      // 数据更新完毕后，将 loading 设置成 false 即可
      loading: false,
      // 是否已加载完成，加载完成后不再触发load事件
      // 若数据已全部加载完毕，则直接将 finished 设置成 true 即可。
      finished: false,
      // 喜欢列表
      list: []
    }
  },
  methods: {
    async onLoad () {
      // (1)ajax请求数据
      const data = await getLikeList(this.page)
      console.log(data)
      // (2)绑定数据: 服务器数组 添加到 数组list最后面
      this.list.push(...data.data.rows)
      // (3)页码++
      this.page++
      // (4)关闭动画 完成本次加载
      this.loading = false
      // (5)判断是否全部加载完毕 (如果接口没数据，默认返回一个空数组)
      // 全部加载完成,设置finished为true
      // if (!data.data.rows.length) {
      if (data.data.rows.length === 0) {
        this.finished = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.collect-page {
  margin-bottom: 50px;
  margin-top: 44px;
}
</style>
